import React, { Component } from "react";
import "../Uploadfiles/uploadtitle.css";

import placeholder from "../../images/upload.png";
import videoFileClose from "../../images/video_file_close.png";
import videoListPanelClose from "../../images/videolist-panel-close.png";

import Uploader from "../Uploadfiles/upload.js";
import config from "../../config.js";
import $ from "jquery";

class Reupload extends Component{
    constructor(props){
        super(props)
        const errorarr=this.props.errorarr
        console.log(errorarr)
        this.state={
            errorarr:errorarr
        }
    }
    inputtitle(e,i){
        var name=e.target.name;
        console.log(111)
        console.log(name)
        var errorarr=this.state.errorarr;
        console.log(errorarr)
        // errorarr[i].name=name
         this.props.reset(errorarr)
    }
    delVideo(i){
        this.props.clearReOne(i)
    }
    reupload(){
        this.props.reuploadfile()
    }
    render(){
        var errorarr=this.props.errorarr;

         return(
             <div>
             <div className={this.props.errorarr.length>0?'show mask':'hide mask'}></div>
                <div className={ this.props.errorarr.length>0?'show upload_toast':'hide upload_toast'}>
            <div className="upload_title">上传失败视频<img src={videoListPanelClose} className={'videolist-panel-close'} onClick={this.props.closeReUploadFiles}/></div>
            <ul className="upload_content">
                {
                  errorarr.map((i,v)=>{
                      return (
                        <li id={v} key={v}>
                            <img src={videoFileClose} className={'video-file-close'} onClick={this.delVideo.bind(this,v)}/>
                            <div className="upload_video">
                              <img src={placeholder} id="placehold" />
                              <video src={window.URL.createObjectURL(i.file.file)} className={'video-preview'}></video>
                            </div>
                            <input type="text" id="filename" maxLength={50} className={"input-video-title"}  value={i.name} onBlur={(e) => this.inputtitle(e,v)} />
                        </li>
                      )
                    })
                }
            </ul>
            <div className={'bottom-btns'}>
                
              <div className={'btn'} onClick={this.props.closeReUploadFiles}>
               取消上传
              </div>
              <div id="btn" onClick={this.reupload.bind(this)} className={'btn upload-btn'}>确认上传</div>
            </div>
        
            </div>
          </div> 
        )
    }
}
export default Reupload